<template>
	<view class="container">
		<view>
			<my-header title=方案设置></my-header>
		</view>
		<view class="body">
			<view class="bts"
				:style="{backgroundImage:(currentBackground === 'bg1' ? styleObject.backgroundImage1 : styleObject.backgroundImage2)}">
				<my-data-select :range="range"></my-data-select>
			</view>
			<view class="content">
				<view class="list"
					:class="{'.list-dashed1':currentBackground === 'bg1', '.list-dashed2':currentBackground === 'bg2'}"
					v-for="item in 5" :key="item">
					<view class="first">
						<view class="title">
							执行时间
						</view>
						<view class="time"
							:style="{backgroundImage:(currentBackground === 'bg1' ? timeBg.backgroundImage1 : timeBg.backgroundImage2)}">
							<input maxlength="10" class="timeInput" :value="time" type="number" placeholder="亲" />
						</view>
					</view>
					<view class="word">
						循环执行多少次，0次表示无线次
					</view>
				</view>
			</view>
			<view class="btn">
				<view class="bt"
					:style="{backgroundImage: (currentBackground === 'bg1' ? styleObject.backgroundImage1 : styleObject.backgroundImage2)}"
					v-for="(item, index) in btnData" :key="index">
					{{ item.title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				time: 20,
				styleObject: {
					backgroundImage1: 'url(' + require('@/static/style1/zh5.png') + ')',
					backgroundImage2: 'url(' + require('@/static/style2/zh5.png') + ')',
				},
				timeBg: {
					backgroundImage1: 'url(' + require('@/static/style1/zh9.png') + ')',
					backgroundImage2: 'url(' + require('@/static/style2/zh9.png') + ')',
				},
				btnData: [{
						title: '取消',
					},
					{
						title: '确认',
					}
				],
				range: [{
						value: 0,
						text: "默认方案一"
					},
					{
						value: 1,
						text: "默认方案二"
					},
					{
						value: 2,
						text: "默认方案三"
					},
				],
			}
		},
		computed: {
			...mapState('theme', ['currentBackground'])
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #11112B;
		color: #fff;
		height: 100vh;
		position: relative;

		.head-item {
			// margin-top: 60rpx;
		}

		.body {
			width: 90%;
			// border: 1px solid red;
			// height: 100%;
			margin: 0 auto;
			margin-top: 20rpx;

			.bts {
				margin-top: 40rpx;
				height: 70rpx;
				// width: 100%;
				width: 250rpx;
				width: 252rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-repeat: no-repeat;
				background-position: center center;

				::v-deep .uni-icons::before {
					color: white;
					margin-left: 50rpx;
				}
			}

			.list {
				// border-bottom: 2px dashed rgba(229, 132, 251, 0.2);
				// height: 300rpx;
				width: 600rpx;
				margin: 50rpx auto;

				.first {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title {
						font-size: 35rpx;
					}

					.time {
						width: 136rpx;
						background-repeat: no-repeat;
						background-position: center center;
						background-size: 134rpx 34rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.timeInput {
							text-align: center;

						}
					}
				}

				.word {
					font-size: 20rpx;
					margin: 30rpx 0;
				}
			}

			.btn {
				height: 70rpx;
				// width: ;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.bt {
					height: 100%;
					// width: 100%;
					width: 252rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					// background: url('@/static/style2/zh5.png');
					background-repeat: no-repeat;
					background-position: center center;

				}
			}
		}
	}
</style>